<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>

	<style>
		body {
			background-color: #eee;
		}
		
		.goods-item-box {
            width: 50%;
            float: left;
            background-color: #fff
        }
        
        .goods-item-box>div {
            padding: 5px;
        }
        
        .goods-item-box .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15px;
            line-height: 30px
        }
        
        .goods-item-box .footer {
            position: relative;
        }
        
        .goods-item-box .footer .price {
            color: #ff0000;
            font-size: 16px;
        }
        
        .goods-item-box .footer .time {
            position: absolute;
            right: 0;
            top: 8px;
            font-size: 10px;
            color: #999
        }
        
        .goods-item-box .img {
            position: relative;
        }
        
        .goods-item-box .img img {
            width: 100%;
            display: block
        }
        
        .goods-item-box .img .icon-videofill {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 30px;
            height: 30px;
            text-align: center;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 50%;
            font-size: 25px;
            line-height: 31px;
        }
	</style>

	<body>
		<div id="app">
			<template v-for=" (vo,index) in items ">
				<div class="goods-item line-bottom" @click="showGoods(vo.id)"> 
					<div class="title" v-html="vo.title"></div>
					<div class="brief" v-html="vo.brief"></div>
					<div class="price"><span>成本价：</span>&yen;{{vo.cost}}<span style="margin-left: 20px;">珠宝玉石价：</span>&yen;{{vo.price}}</div>
					<div class="pics">
						<div class="img" v-for="(v,index) in vo.pics ">
							<img class="lazy" :data-original="v+'@!200x200'" src="images/nopic.gif" v-if="index < 4">
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="tools" flex="">
						<span flex-box="0" class="time">{{vo.time}}</span>
						<span flex-box="1"></span> 
						<span flex-box="0" class="favor" @click.stop="favor(vo.id,index)" v-if="vo.is_favor != null" style="color: #45a75c;"><i class="iconfont icon-favorfill"></i> 收藏</span>
						<span flex-box="0" class="favor" @click.stop="favor(vo.id,index)" v-else><i class="iconfont icon-favor"></i> 收藏</span>
						<span flex-box="0" class="share" @click.stop="share(index)"><i class="iconfont icon-share"></i> 转发</span>
					</div>
				</div>
			</template> 

			<template v-if="loading == 'inits'">
				<div flex="main:center cross:center" style="width:100%; height: 400px; ">
					<img src="images/slogo.png" style="width: 180px;">
				</div>
			</template> 

			<template v-if="loading == 'nodata'"> 
				<div flex="main:center cross:center" style="width:100%; height: 400px; ">
					<img src="images/nodata.png" style="width: 150px;">
				</div>
			</template>

			<template v-if="loading == 'more'">
				<div class="weui-loadmore">
					<i class="weui-loading"></i>
					<span class="weui-loadmore__tips">加载更多</span>
				</div>
			</template>

			<template v-if="loading == 'more_nodata'">
				<div class="weui-loadmore weui-loadmore_line">
					<span class="weui-loadmore__tips" style="background: #eee;">没有啦</span>
				</div>
			</template>
			
			
			
		</div>
		</div>
		
		<div id="toTop" onclick="Top()">
				<i class="iconfont icon-top"></i>
			</div>
			
			
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/jquery.lazyload.js"></script>
		<script src="js/systemShare.js"></script>
		<script src="js/wxShare.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/common.js"></script>
		
		<script type="text/javascript" charset="utf-8">
			mui.init();
			var vm;
			mui.plusReady(function() {
				var self = plus.webview.currentWebview(); 
				vm = new Vue({
					el: "#app",
					data: {
						items: [],
						loading: 'inits', 
						k:self.keyword,   
						p: 1,
						r: 20,
						ismore:false
					},
					methods: {
						inits: function() {
							var vm = this;
							Get(SERVER_URL +"&c=Goods&a=datalist", { 
								p: 1,
								r: vm.r, 
								k: vm.k
							}, function(data) {
								if(data.status) {
									vm.items = data.info;
									vm.p = 2;
									vm.loading = 'more';
									self.endPullToRefresh();
									vm.$nextTick(function(){
							 				$("img.lazy").lazyload({
												container: $(document.body),
											});
							 			})
								} else {
									self.endPullToRefresh();
									vm.loading = 'nodata';
								}
							})
							
						},
						getMore:function(){
							var vm = this;
							if(vm.ismore) return;
								vm.ismore = true;
							Get(SERVER_URL +"&c=Goods&a=datalist",{
									p: vm.p,
									r: vm.r,
									k: vm.k
								}, function(data) {
									if(data.status) {
										for(var i in data.info) { 
											vm.items.push(data.info[i]);
										}
										vm.p++;
										vm.ismore = false;
										vm.$nextTick(function(){
							 				$("img.lazy").lazyload({
												container: $(document.body),
											});
							 			})
									} else {
										vm.loading = 'more_nodata';
										vm.ismore = false;
									}

								})

						},
						showGoods: function(id) {
							clicked('goods_details.html?id='+id, 'pop-in'); 
						},
						favor : function(id,index){
							Get(SERVER_URL+"&c=Favor&a=setFavor",{id:id},function(data){
								if(data.status){
									if(data.info == 'add') {
										vm.$set(vm.items[index], 'is_favor', 1)
									}
				
									if(data.info == 'delete') {
										vm.$set(vm.items[index], 'is_favor', null) 
									}
									
									plus.webview.getWebviewById('favor').evalJS("getInits()");
								}
							})
						},
						share : function(index){
							var vm = this;
							var goodsInfo = vm.items[index]
							if(plus.os.name == 'Android') {
								plus.nativeUI.actionSheet({
									title: "分享",
									cancel: "取消",
									buttons: [{
										title: "一键转发"
									}, {
										title: "转发链接"
									}, {
										title: "下载组图"
									}, {
										title: "复制描述"
									}]
								}, function(e) {
									var index = e.index;
									switch(index) {
										case 0:
											break;
										case 1:
											easyShare(goodsInfo.pics, '【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
											break;
										case 2:
											shareLink(goodsInfo.brief + ',' + goodsInfo.price + '元', goodsInfo.pics[0], "http://shop.51jushi.com/index.php?m=Store&c=index&a=goods&id="+ goodsInfo.id);
											break;
										case 3:
											DownloadPics(goodsInfo.pics)
											break;
										case 4:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
											break;
										default:
											// 其它
											break;
									}
								});
							}

							if(plus.os.name == 'iOS') {
								plus.nativeUI.actionSheet({
									title: "分享",
									cancel: "取消",
									buttons: [{
											title: "一键转发"
										},
										{
											title: "转发链接"
										},
										{
											title: "下载组图"
										},
										{
											title: "复制描述"
										}
									]
								}, function(e) {
									var index = e.index;
									switch(index) {
										case 0:
											break;
										case 1:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
											jushiShare.share(goodsInfo.pics);
											break;
										case 2:
											jushiShare.share(goodsInfo.pics[0], "http://shop.51jushi.com/index.php?m=Store&c=index&a=goods&id="+ goodsInfo.id, goodsInfo.brief + ',' + goodsInfo.price + '元')
											break;
										case 3:
											DownloadPics(goodsInfo.pics)
											break;
										case 4:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
											break;
										default:
											// 其它
											break;
									}
								});
							}
						}
					}
				})

			});
			
			
			mui.plusReady(function() { 
				var self = plus.webview.currentWebview(); 
				self.setPullToRefresh({
					support: true,
					style: 'circle',
					color: '#57a30d',
					offset: '0px'
				}, refresh);
				self.beginPullToRefresh();
			});
			
			
			//监听是否滚动到底部
			document.addEventListener("plusscrollbottom", getMoreData, false);

			//加载更多
			function getMoreData() {
				vm.getMore();
			}

			// 刷新页面
			function refresh() {
				vm.inits();
			}

			//监听滚动显示回到顶部图标
			document.addEventListener("scroll", function() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				if(scrollTop > 1500) {
					$("#toTop").show()
				} else {
					$("#toTop").hide();
				}
			}, false);

		</script>
	</body>

</html>